<script setup>
	import {
		reactive,
		ref
	} from "vue"
	
	import yFeedback from "./components/yFeedback.vue"
	import yNote from "./components/yNote.vue"
	import ySheet from "./components/ySheet.vue"

	// 刷题模式
	let current = ref(0)
	const subList = reactive(['答题模式', '背题模式', ])
	const sectionChange = (e) => {
		console.log(e);
	}
	
	// 题型
	let questionType = ref(2)
	const questionTypeObj = reactive({
		1:'判断题',
		2:'单选题',
		3:'多选题',
		4:'简答题'
	})
	
	// 反馈
	const feedBack = ref(null)
	const openFeedback = ()=>{
		console.log(111,feedBack)
		feedBack.value.open()
	}
	
	// 笔记
	const note = ref(null)
	const openNote = ()=>{
		note.value.open()
	}
	
	// 答题卡
	const sheet = ref(null)
	const openSheet = ()=>{
		sheet.value.open()
	}
</script>

<template>
	<view class="container">
		<!-- 答题模式 -->
		<up-sticky bgColor="#f8f8f8">
			<view class="u-m-l-auto u-m-r-auto u-p-20" style="width: 460rpx;">
				<up-subsection :list="subList" :current="current" bgColor="#333" activeColor="#1269db"
					inactiveColor="#fff" fontSize="15" @change="sectionChange"></up-subsection>
			</view>
		</up-sticky>

		<!-- 题目 -->
		<view class="u-p-20 question-box">
			<view class="title">
				<view class="u-m-r-20 tag">
					<up-tag :text="questionTypeObj[questionType]" size="mini" plain></up-tag>
				</view>
				<text class="y-f-s-40">我国推进现代农业建设的核心和基础是()。</text>
			</view>
			
			<!-- 判断题 -->
			<template v-if="questionType === 1">
				<view class="option-box">
					<view class="item">
						<text>A. 正确</text>
					</view>
					
					<view class="item">
						<text>B. 错误</text>
					</view>
				</view>
			</template>
			
			<!-- 单选题 -->
			<template v-if="questionType === 2">
				<view class="option-box">
					<view class="item wrong">
						<text>A. </text>
						<text>农村土地承包关系</text>
					</view>
					
					<view class="item">
						<text>B. </text>
						<text>农户集体经营水平</text>
					</view>
					
					<view class="item correct">
						<text>C. </text>
						<text>农业生产经营组织创新</text>
					</view>
					
					<view class="item">
						<text>D. </text>
						<text>新型农民合作组织创新</text>
					</view>
				</view>
			</template>
		</view>
		
		<!-- 解析 -->
		<view class="u-m-20 analys-box">
			<!-- 答案 -->
			<view class="u-flex u-flex-items-start u-flex-between u-p-20 u-border answer-box">
				<view class="">
					<text>正确答案：</text>
					<text class="u-m-r-30">C</text>
					
					<text>您的答案：</text>
					<text>A</text>
				</view>
				
				<view class="u-m-l-20" >
					<up-tag text="反馈" size="mini" plain @click="openFeedback"></up-tag>
				</view>
			</view>
		
			<!-- 试题详解 -->
			<view class="u-m-t-40 detail-box">
				<view class="y-f-w-bold titel">试题详解</view>
				<view class="u-m-t-10 y-f-s-26">
					C项正确，2013年中央一号文件《中共中央、国务院关于加快发展现代农业，进一步增强农村发展活力的若干意见》提出，“农业生产经营组织创新是推进现代农业建设的核心和基础。要尊重和保障农户生产经营的主体地位，培育和壮大新型农业生产经营组织，充分激发农村生产要素潜能。”
				</view>
			</view>
		</view>
		
		<u-gap height="60"></u-gap>
		<view class="u-flex u-flex-items-center u-p-20 foot-box">
			<view class="u-flex u-flex-items-center">
				<up-icon name="star" size="20"></up-icon>
				<text class="y-f-s-26 u-m-l-10">收藏</text>
			</view>
			<view class="u-flex u-flex-items-center u-m-l-30" @click="openNote">
				<up-icon name="edit-pen" size="20"></up-icon>
				<text class="y-f-s-26 u-m-l-10">笔记</text>
			</view>
			
			<!-- 对题数 -->
			<view class="u-flex u-flex-items-center u-m-l-auto">
				<up-icon name="checkmark-circle" size="20" color="#4cd964"></up-icon>
				<text class="y-f-s-26 u-m-l-10">1</text>
			</view>
			
			<!-- 错题数 -->
			<view class="u-flex u-flex-items-center u-m-l-30">
				<up-icon name="close-circle" size="20" color="#dd524d"></up-icon>
				<text class="y-f-s-26 u-m-l-10">1</text>
			</view>
			
			<!-- 做题进度统计 -->
			<view class="u-flex u-flex-items-center u-m-l-30" @click.stop="openSheet">
				<up-icon name="grid" size="20"></up-icon>
				<text class="y-f-s-26 u-m-l-10">1</text>
				<text class="y-f-s-26 u-m-l-10">/</text>
				<text class="y-f-s-26 u-m-l-10">1590</text>
			</view>
		</view>
		
		
		<!-- 反馈 -->
		<yFeedback ref="feedBack"></yFeedback>
		
		<!-- 笔记 -->
		<yNote ref="note"></yNote>
		
		<!-- 答题卡 -->
		<ySheet ref="sheet"></ySheet>
	</view>
</template>

<style lang="scss" scoped>
	.question-box{
		.title {
			line-height: 60rpx;
			.tag{
				margin-top: 13rpx;
				float: left;
			}
		}
		
		.option-box{
			.item{
				
				margin-top: 10rpx;
				line-height: 46rpx;
				
				padding: 20rpx;
				
				border-radius: 10rpx;
			}
			
			.cur {
				background: rgba($uni-color-primary, .3);
			}
			
			.correct{
				position: relative;
				background: rgba($uni-color-success, .3);
			}
			.correct::after{
				width: 40rpx;
				height: 40rpx;
				padding: 10rpx 0 0 10rpx;
				
				content: "√";
				position: absolute;
				right: 0;
				bottom: 0;
				
				color: #fff;
				background: $uni-color-success;
				border-radius: 40rpx 0 0 0 ;
				text-align: center;
				line-height: 30rpx;
				
			}
			
			.wrong{
				position: relative;
				background: rgba($uni-color-error, .3);
			}
			.wrong::after{
				width: 40rpx;
				height: 40rpx;
				padding: 10rpx 0 0 10rpx;
				
				content: "×";
				position: absolute;
				right: 0;
				bottom: 0;
				
				color: #fff;
				background: $uni-color-error;
				border-radius: 40rpx 0 0 0 ;
				text-align: center;
				line-height: 30rpx;
				
			}
		}
	
	}
	
	
	.foot-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		
		height: 80rpx;
		background: #fff;
	}
</style>